<template>
  <view class="container">
    <S1Header title="赊欠录入" :on-back="onBack" :handle-submit="handleSubmit" />

    <view class="tabs">
      <view class="tab" :class="{ active: activeTab === 0 }" @click="changeTab(0)">
        支出录入
      </view>
      <view class="tab" :class="{ active: activeTab === 1 }" @click="changeTab(1)">
        收入录入
      </view>
    </view>

    <view class="main-container">
      <view v-if="activeTab === 0">
        <view class="form-container">
          <!-- 支出金额 -->
          <view class="form-item">
            <text class="label">
              支出金额
            </text>
            <view class="input-group">
              <input v-model="amount" class="input" placeholder="请输入支出金额" type="number">
              <div class="import-btn">
                元
              </div>
            </view>
          </view>

          <!-- 支付方式 -->
          <view class="payment-methods">
            <view v-for="method in paymentMethods" :key="method.id" class="payment-method"
              :class="{ 'payment-method-active': selectedMethod === method.id }"
              @click="selectPaymentMethod(method.id)">
              <image :src="method.icon" class="payment-icon" />
              <text class="payment-text">
                {{ method.name }}
              </text>
            </view>
          </view>

          <!-- 支出项目 -->
          <view class="form-item">
            <text class="label">
              支出项目
            </text>
            <view class="input-group">
              <input class="input" placeholder="请选择支出项目" disabled>
              <div class="import-btn" @click="toggleImportPopup">
                导入
              </div>
            </view>
          </view>
          <view class="form-item">
            <text class="label">
              备注信息
            </text>
            <view class="input-group">
              <input class="input" placeholder="请输入备注信息" style="padding:8px 2px">
            </view>
          </view>
          <view class="form-item">
            <text class="label">
              关联批次
            </text>
            <view class="input-group">
              <input class="input" placeholder="请选择关联批次" disabled>
              <div class="import-btn">
                关联
              </div>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <view class="form-container">
          <!-- 收入金额 -->
          <view class="form-item">
            <text class="label">
              收入金额
            </text>
            <view class="input-group">
              <input v-model="amount" class="input" placeholder="请输入收入金额" type="number">
              <div class="import-btn">
                元
              </div>
            </view>
          </view>

          <!-- 支付方式 -->
          <view class="payment-methods">
            <view v-for="method in paymentMethods" :key="method.id" class="payment-method"
              :class="{ 'payment-method-active': selectedMethod === method.id }"
              @click="selectPaymentMethod(method.id)">
              <image :src="method.icon" class="payment-icon" />
              <text class="payment-text">
                {{ method.name }}
              </text>
            </view>
          </view>

          <!-- 收入项目 -->
          <view class="form-item">
            <text class="label">
              收入项目
            </text>
            <view class="input-group">
              <input class="input" placeholder="请选择收入项目" disabled>
              <div class="import-btn" @click="toggleImportPopup">
                导入
              </div>
            </view>
          </view>

          <!-- 备注信息 -->
          <view class="form-item">
            <text class="label">
              备注信息
            </text>
            <view class="input-group">
              <input class="input" placeholder="请输入备注信息" style="padding:8px 2px">
            </view>
          </view>
        </view>
      </view>
    </view>

    <SearchFilterPopup :show="showImportPopup" title="收支项搜索及创建" input-placeholder="搜索收支项名称" button-text="搜索"
      :list="importItems" @update:show="showImportPopup = $event" />
  </view>
</template>

<script>
  import S1Header from '@/components/s1-header';

  export default {
    components: {
      S1Header,
    },
    data() {
      return {
        activeTab: 0,
        amount: '',
        showImportPopup: false,
        selectedMethod: 'cash',
        paymentMethods: [{
            id: 'cash',
            name: '现金',
            icon: '/static/images/common/cash.png'
          },
          {
            id: 'wechat',
            name: '微信',
            icon: '/static/images/common/wechat.png'
          },
          {
            id: 'alipay',
            name: '支付宝',
            icon: '/static/images/common/alipay.png'
          },
          {
            id: 'unionpay',
            name: '银联',
            icon: '/static/images/common/unionpay.png'
          },
          {
            id: 'other',
            name: '其他',
            icon: '/static/images/common/other.png'
          },
        ],
        importItems: [],
      };
    },
    methods: {
      onBack() {
        uni.navigateBack();
      },
      handleSubmit() {

      },
      changeTab(tabIndex) {
        this.activeTab = tabIndex;
      },
      selectPaymentMethod(methodId) {
        this.selectedMethod = methodId;
      },
      toggleImportPopup() {
        this.showImportPopup = !this.showImportPopup;
        this.importItems = this.activeTab === 0 ? ['档口收租', '卖纸卖子'] : ['租赁收入', '销售收入'];
      },
    },
  };
</script>


<style scoped>
  .container {
    display: flex;
    flex-direction: column;
  }

  .tabs {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background-color: #fff;
  }

  .tab {
    font-size: 32rpx;
    color: #808080;
    padding: 20rpx;
    flex: 1;
    text-align: center;
    border-radius: 5rpx;
    transition: all 0.3s ease;
  }

  .tab.active {
    color: #fff;
    background-color: #43cf7c;
    font-weight: bold;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  }

  .form-container {
    background-color: rgba(242, 247, 255, 1);
    padding: 20rpx;
  }

  .form-item {
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
    padding: 20rpx;
    background-color: #fff;
  }

  .label {
    font-size: 28rpx;
    color: #000;
    font-size: 17px;
    font-weight: bold;
    display: block;
    margin-bottom: 20rpx;
  }

  .input-group {
    display: flex;
    align-items: center;
    background-color: rgba(242, 247, 255, 1);
    padding-left: 12px;
    border-radius: 5px;
  }

  .input {
    flex: 1;
    font-size: 32rpx;
    height: 60rpx;
  }

  .import-btn {
    border-radius: 0px 7.43px 7.43px 0px;
    background: rgba(67, 207, 124, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    color: white;
    font-size: 28rpx;
    width: 120rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-weight: bold;
    font-size: 32rpx;
  }

  .payment-methods {
    display: flex;
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    justify-content: space-around;
  }

  .payment-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22rpx 32rpx;
    border-radius: 24rpx;
  }

  .payment-method-active {
    background-color: #43CF7C;
  }

  .payment-icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 10rpx;
  }

  .payment-text {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
</style>
